import { Core } from './decorators/core.decorator';
import { ZTable } from './cors/table';
import { tableFactory } from './factorys/table.factory';
import { AZExcel, NExcel } from './types';
import { Hook } from './cors/hook';
import { getPixelRatio } from './utils/tools';
import'./index.less';

@Core({
    cell: []
})
export class ZExcel extends AZExcel{
    static get version() {
        return __VERSION__;
    }
    public get version() {
        return __VERSION__;
    }
    static instance: ZExcel = null;
    static create(ele: HTMLElement): ZExcel {
        if(ZExcel.instance == null) {
            let instance  = new ZExcel(ele);
            instance._init();
            return instance;
        } else {
            return ZExcel.instance;
        }
    }
    protected tables: ZTable[] = [];
    protected zExcelEle: HTMLElement;
    protected cells: Map<NExcel.CellTypeName, NExcel.ICellType> = new Map();
    protected canvasEle: HTMLCanvasElement;
    protected inject: Map<string, any> = new Map();
    public activeTable: ZTable;
    constructor(protected  container: HTMLElement) {
        super();
    }
    protected _init() {
        this.inject.set(NExcel.TableContainerEleToken, this.container);
        this.createCanvas();
        let table = this.createTable();
        table.visible = true;
        this.activeTable = table;
    }
    protected createDefaultConfig() {
        let config: NExcel.IConfig = {
            defaultRowHeaderWidth: 74,
            defaultRowHeight: 17
        }
        this.inject.set(NExcel.ConfigToken, config);
    }
    protected createCanvas() {
        let excelContainer = document.createElement('div') as HTMLDivElement;
        excelContainer.className = 'z-excel';
        this.zExcelEle = excelContainer;
        this.container.appendChild(excelContainer);
        let canvasContainer = document.createElement('div') as HTMLDivElement;
        canvasContainer.className = 'z-canvas-container';
        excelContainer.appendChild(canvasContainer);
        let canvas = document.createElement('canvas');
        canvas.setAttribute('class', 'z-table-bg');
        function setAttribut() {
            canvas.setAttribute('style', `width: ${canvasContainer.clientWidth}px; height: ${canvasContainer.clientHeight}px`);
            let ratio = getPixelRatio(canvas.getContext('2d'));
            canvas.height = canvasContainer.clientHeight * ratio;
            canvas.width = canvasContainer.clientWidth * ratio;
            // console.log(canvasContainer.clientWidth, canvasContainer.clientWidth * ratio)
        }
        // window.addEventListener('resize', setAttribut);
        setAttribut();
        this.canvasEle = canvas;
        let ctx = canvas.getContext('2d');
        this.inject.set(NExcel.CanvasToken, canvas);
        canvasContainer.appendChild(canvas);
        this.createOperateElements();
        this.createEditContainer();
        this.createFillElement(canvasContainer);
        this.createDataElement(canvasContainer);
        this.createFreezeContainer(canvasContainer);
    }
    protected createOperateElements() {
        let container = document.createElement('div') as HTMLDivElement;
        container.className = "z-table-operate";
        this.zExcelEle.appendChild(container);
        this.inject.set(NExcel.OperateContainerToken, container);
    }
    protected createEditContainer() {
        let container = document.createElement('div') as HTMLDivElement;
        container.className = "z-table-edit-container";
        this.zExcelEle.appendChild(container);
        this.inject.set(NExcel.EditorContainerToken, container);
    }
    protected createDataElement(ExcelContainer: HTMLElement) {
        let container = document.createElement('canvas') as HTMLCanvasElement;
        container.className = "z-table-data";
        ExcelContainer.appendChild(container);
        this.inject.set(NExcel.TableDataCanvasToken, container);
        // function setAttribut() {
        //     container.setAttribute('style', `width: ${ExcelContainer.clientWidth}px; height: ${ExcelContainer.clientHeight}px`);
        //     let ratio = getPixelRatio(container.getContext('2d'));
        //     container.height = ExcelContainer.clientHeight * ratio;
        //     container.width = ExcelContainer.clientWidth * ratio;
        //     // console.log(canvasContainer.clientWidth, canvasContainer.clientWidth * ratio)
        // }
        // // window.addEventListener('resize', setAttribut);
        // setAttribut();
    }
    protected createFreezeContainer(ExcelContainer: HTMLElement) {
        let container = document.createElement('canvas') as HTMLCanvasElement;
        container.className = "z-table-freeze";
        ExcelContainer.appendChild(container);
        this.inject.set(NExcel.TableFreezeCanvasToken, container);
    }
    protected createFillElement(ExcelContainer: HTMLElement) {
        let container = document.createElement('canvas') as HTMLCanvasElement;
        container.className = "z-table-data-fill";
        ExcelContainer.appendChild(container);
        this.inject.set(NExcel.TableDataCanvasFillToken, container);
        function setAttribut() {
            container.setAttribute('style', `width: ${ExcelContainer.clientWidth}px; height: ${ExcelContainer.clientHeight}px`);
            let ratio = getPixelRatio(container.getContext('2d'));
            container.height = ExcelContainer.clientHeight * ratio;
            container.width = ExcelContainer.clientWidth * ratio;
            // console.log(canvasContainer.clientWidth, canvasContainer.clientWidth * ratio)
        }
        setAttribut();
    }
    public createTable() {
        let table = tableFactory(ZTable, this, [Hook]);
        this.tables.push(table);
        return table;
    }
    public destroy() {
        console.log(this);
    }
}
// @ts-ignore
window.ZExcel = ZExcel;

export default ZExcel;


